<!-- 登陆 -->
<template>
  <div id="login">
    <img style="width:100%" src="../../static/images/login/loginLogo.png" />
    <form style="margin-top:1rem;padding-left:0.6rem;padding-right:1.25rem;margin-bottom:0.62rem">
      <p class="inforTip">{{rules.tip}}</p>
      <div class="fomrGroup">
        <img src="../../static/images/login/user.png">
        <mt-field class="formInput" placeholder="请输入用户名" @change='validation' :state='rules.username.state' v-model.trim="form.username"></mt-field>
      </div>
      <div class="fomrGroup">
        <img src="../../static/images/login/passw.png">
        <mt-field class="formInput" placeholder="请输入密码" @change='validation' type="password" :state='rules.password.state' v-model="form.password"></mt-field>
      </div>
    </form>
    <div style="display:flex;display: -webkit-flex;justify-content:center;padding:0 0.625rem;">
      <mt-button type="primary" @click='login' size="large" >登录</mt-button>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          username: '12345678908',
          password: '123456'
        },
        rules: {
          username: {},
          password: {},
          tip: ''
        },
      }
    },
    methods: {
      login() {
        if (this.validation().result == 0) {
          return;
        }
        let params = {
            username: this.form.username,
            password: this.form.password
          },
          that = this;
        this.$api.post('/wechat/login', params, function (data) {
          if (JSON.stringify(data.obj)) {
            sessionStorage.setItem('loginData', JSON.stringify(data.obj))
            that.$router.push({
              path: '/home'
            });
          }
        }, function (data) {
          that.rules.tip = '用户名或者密码错误！'
        })
      },
      validation() {
        let formObj = this.form,
          that = this,
          canGo = true,
          msgObj = {},
          lableStr = '';
        Object.keys(formObj).map(name => {
          if (!formObj[name]) {
            canGo = false;
            msgObj.result = 0;
            that.$set(that.rules[name], 'state', 'error');
            that.rules.tip = '用户名或者密码不能为空';
            // switch (name) {
            //   case 'username':
            //     that.$set(that.rules[name], 'tips', lableStr);                
            //     break;
            //   case 'password':
            //   that.$set(that.rules[name], 'tips', lableStr)
            //     break;
            // }
          }
          else{
            that.$set(that.rules[name], 'state', '')
          }     
        });

        if (canGo) {
            that.rules.tip = '';
            msgObj.result = 1;
          }

        return msgObj
      }
    }
  }

</script>
<style scoped>
  .fomrGroup {
    display: flex;
    display: -webkit-flex;
    margin-bottom: .1rem;
    align-items: center;
  }

  .fomrGroup img {
    width: 0.75rem;
    height: 0.75rem
  }

  .formInput {
    flex-grow: 0
  }

  .inforTip {
    color: red;
  }

</style>
<style>
  #login .mint-cell-wrapper{
    background-image: none;
  }
</style>
